<template>
    <div class="advantage-content">
        <div class="container">
            <h2>为什么选择绿通云智慧驾校管理平台</h2>
            <div class="content-wrapper">
                <!-- 左侧文字内容 -->
                <div class="text-section">
                    <div v-for="(feature, idx) in features" :key="idx" class="feature-item"
                        :class="{ ['bg' + (idx + 1)]: activeIndex === idx }" @mouseenter="handleMouseEnter(idx)">
                        <h3 class="feature-title">
                            <span :class="feature.titlePrimaryClass">{{ feature.titlePrimary }}</span>
                            <span :class="feature.titleSecondaryClass">{{ feature.titleSecondary }}</span>
                        </h3>
                        <ul class="feature-list" :class="{ 'active': activeIndex === idx }">
                            <li class="feature-point" v-for="(point, pIdx) in feature.points" :key="pIdx">
                                <el-icon class="check-icon">
                                    <Check />
                                </el-icon>
                                {{ point }}
                            </li>
                        </ul>
                    </div>

                    <div class="cta-section" @click="showConsult = true">
                        <el-button type="primary" class="try-button">
                            立即试用
                            <el-icon class="ml-2">
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
                <div class="image-section">
                    <el-carousel ref="carouselRef" :autoplay="false" indicator-position="none" direction="vertical">
                        <el-carousel-item v-for="(src, idx) in images" :key="idx">
                            <img class="carousel-image" :src="src" alt="feature" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <consult v-if="showConsult" @close="showConsult = false" />
    </div>
</template>
<script lang="ts" setup>
import { Check, ArrowRight } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import type { CarouselInstance } from 'element-plus'
import consult from '@/components/consult.vue';

const showConsult = ref(false);

// 控制ul显示状态的响应式变量
const activeIndex = ref(0) // 默认显示第一个

// 鼠标悬停处理函数
const handleMouseEnter = (index: number) => {
    activeIndex.value = index
}

const carouselRef = ref<CarouselInstance | null>(null)
const images = [
    'https://image.lutongjiakao.com/system/72d1a7fefeeb42d88ff6bc9b5fd15574.png',
    'https://image.lutongjiakao.com/system/c9b4ffcd1a2a492aa02e5cf607b6a795.jpg',
    'https://image.lutongjiakao.com/system/0ff2170067a14ed7a26717cefc31792e.png',
    'https://xuantu.renderbus.com/_next/static/media/why-image4.3b844a0e.webp'
]

watch(activeIndex, (idx) => {
    if (carouselRef.value) {
        carouselRef.value.setActiveItem(idx)
    }
})

// 通过数据驱动渲染左侧特性列表
const features = [
    {
        titlePrimary: '全场景数字化运营，',
        titlePrimaryClass: 'highlight-text',
        titleSecondary: '全面赋能驾校降本增效',
        titleSecondaryClass: 'price-text',
        points: ['从招生引流到成交转化，让市场招生更简单', '学员信息全方位管理，让学员管理更省心', '驾校场地、人员、车辆等资产一体化管理']
    },
    {
        titlePrimary: '多端联动，全平台支持，',
        titlePrimaryClass: 'highlight-text',
        titleSecondary: '注册即用',
        titleSecondaryClass: 'quality-text',
        points: ['公众号+小程序+H5+PC等多端全覆盖', '私有化独立IP，品牌更加便捷传播', 'UI界面自定义编辑，主题风格自由切换，打造差异化']
    },
    {
        titlePrimary: '丰富营销玩法，',
        titlePrimaryClass: 'quality-text',
        titleSecondary: '线上线下场景打通',
        titleSecondaryClass: 'highlight-text',
        points: ['打破传统驾校束缚，实现高效拉新', '面面俱到，上10款款强劲插件，简单好用', '围绕场景需求，定期更新维护，快速迭代升级产品']
    },
    {
        titlePrimary: '采用数据加密存储技术，保证',
        titlePrimaryClass: 'highlight-text',
        titleSecondary: '数据安全稳定',
        titleSecondaryClass: 'quality-text',
        points: ['采用腾讯云、阿里云服务器分布式部署，数据双备份', '7*24小时不间断监测维护系统，智能运维流', '多对一企业微信群服务，及时高效响应']
    }
]

</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.advantage-content {
    // background: rgb(247 248 255/var(--tw-bg-opacity, 1));
    background: linear-gradient(rgb(255, 255, 255) 1.56%, rgba(255, 255, 255, 0) 26.12%), linear-gradient(90deg, rgba(216, 245, 234, 0.6) 0%, rgba(241, 249, 253, 0.6) 51.84%, rgba(219, 240, 255, 0.6) 99.69%);
    // background: linear-gradient(135deg, #f7f8ff 0%, #e8f0ff 100%);
    height: rem(600);
    display: flex;
    justify-content: center;
    padding-top: rem(60);
}

.container {
    width: rem(910);

    h2 {
        font-size: rem(36);
        font-weight: 700;
        color: #1a1a1a;
        text-align: center;
        margin-bottom: rem(60);
    }
}

.content-wrapper {
    display: flex;
    // align-items: center;
    gap: rem(40);
}

.text-section {
    width: rem(390);
    display: flex;
    flex-direction: column;
    gap: rem(20);
}

.feature-item {
    padding-left: rem(30);
    border-radius: rem(12);
    cursor: pointer;

    &:last-child {
        margin-bottom: 0;
    }

    &:hover {
        padding-top: rem(20);
    }
}

.feature-title {
    font-size: rem(18);
    font-weight: 600;
    line-height: 1.4;

    .highlight-text {
        color: #333;
    }

    .price-text {
        color: rgb(17, 200, 113);
        font-weight: 700;
    }

    .quality-text {
        color: rgb(17, 200, 113);
        font-weight: 700;
    }
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-top: rem(10);
    display: none;
    max-height: 0;
    overflow: hidden;

    &.active {
        display: block;
        max-height: rem(200);
        margin-top: rem(20);
    }
}

.feature-point {
    display: flex;
    align-items: center;
    margin-bottom: rem(12);
    font-size: rem(12);
    color: #333;

    .check-icon {
        color: #00b894;
        margin-right: rem(12);
        font-size: rem(18);
    }
}

.try-button {
    background: linear-gradient(90deg, rgb(15, 210, 183) 0%, rgb(37, 207, 107) 100%);
    border: none;
    border-radius: rem(25);
    width: rem(115);
    height: rem(32);
    font-size: rem(12);
    font-weight: 400;
    display: flex;
    align-items: center;

    .ml-2 {
        margin-left: rem(15);
    }

    &:hover {
        background: linear-gradient(90deg, rgb(37, 207, 107) 0%, rgb(15, 210, 183) 100%);
    }
}

.feature-item {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    &:hover {
        padding-top: rem(20);
    }
}

.feature-item:nth-child(1) {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/5e5bb6357e8f4578bc53a856ba2dee21.png');
    }
}

.feature-item:nth-child(2) {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/df733ed7d7de40f5b6c7d9e237c366a0.png');
    }
}

.feature-item:nth-child(3) {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/8f4033b0b0174023963d8a1eb00e0b54.png');
    }
}

.feature-item:nth-child(4) {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/dafa0e6fd2e143158db24b37fba00f88.png');
    }
}

.bg1 {
    background-image: url('https://image.lutongjiakao.com/system/5e5bb6357e8f4578bc53a856ba2dee21.png');
    padding-top: rem(20);
}

.bg2 {
    background-image: url('https://image.lutongjiakao.com/system/df733ed7d7de40f5b6c7d9e237c366a0.png');
    padding-top: rem(20);
}

.bg3 {
    background-image: url('https://image.lutongjiakao.com/system/8f4033b0b0174023963d8a1eb00e0b54.png');
    padding-top: rem(20);
}

.bg4 {
    background-image: url('https://image.lutongjiakao.com/system/dafa0e6fd2e143158db24b37fba00f88.png');
    padding-top: rem(20);
}

:deep(.el-carousel__container) {
    height: rem(340);
    border-radius: rem(12);
    overflow: hidden;

    .img-swiper {
        width: 100%;
        height: 100%;
    }
}

.cta-section {
    margin-top: rem(20);
}

.image-section {
    flex: 1;
    display: flex;
    // align-items: center;

    :deep(.el-carousel) {
        width: 100%;
    }
}

.carousel-image {
    width: 100%;
    height: 100%;
    border-radius: rem(12);
    box-shadow: 0 rem(8) rem(24) rgba(0, 0, 0, 0.08);
    // overflow: hidden;
}
</style>